$(function () {
    banner();

    initMobileTab();

    $('[data-toggle="tooltip"]').tooltip()

});

function banner () {
    var getData = function (callback) {
        if (window.data) {
            callback && callback(window.data);
        } else {
            const data = [
                { "pc": "images/slide_01_2000x410.jpg", "m": "images/slide_01_640x340.jpg" },
                { "pc": "images/slide_02_2000x410.jpg", "m": "images/slide_02_640x340.jpg" },
                { "pc": "images/slide_03_2000x410.jpg", "m": "images/slide_03_640x340.jpg" },
                { "pc": "images/slide_04_2000x410.jpg", "m": "images/slide_04_640x340.jpg" }
            ]
            window.data = data;
            callback && callback(window.data);
        }
    };
    var render = function (data) {
        var isM = $(window).width() < 768;
        console.log(isM);
        var htmlPoint = template('bannerPointTemplate', { list: data });
        var htmlIMG = template('bannerIMGTemplate', { isM: isM, list: data });
        $('.carousel-inner').html(htmlIMG);
        $(".carousel-indicators").html(htmlPoint);
        console.log("renderData");
    };

    $(window).on('resize', function () {
        // console.log($(this).width());
        getData(render);
    }).trigger('resize');

    $carousel = $('.carousel');
    // $carousel.carousel({interval: 2000})
    var startX = 0;
    var distanceX = 0;
    var isMove = false;
    $('.wjs_banner').on('touchstart', function (e) {
        startX = e.originalEvent.touches[0].screenX;
        $carousel.carousel('pause');
    }).on('touchmove', function (e) {
        distanceX = e.originalEvent.touches[0].screenX - startX;
        isMove = Math.abs(distanceX) > 50;
    }).on('touchend', function (e) {
        if (isMove) {
            distanceX < 0 ? $carousel.carousel('next') : $carousel.carousel('prev');
        }
        $carousel.carousel('cycle');
        startX = 0;
        distanceX = 0;
        isMove = false;
    })
}

function initMobileTab () {
    var width = 0;
    var tab = $('.nav-tabs-parent>.nav-tabs');
    tab.find('li').each(function (index, element) {
        width += $(element).outerWidth(true);
    });
    tab.width(width);
    var myScrolla = new IScroll('.nav-tabs-parent', {
        // mouseWheel: true,
        // scrollbars: false,
        // disableMouse: false,
        // disablePointer: false,
        scrollX: true,
        scrollY: false,
        click: true
    });
}